import { Skeleton } from "antd";
import { EyeOutlined, LikeOutlined } from "@ant-design/icons";
import { GteArticleListApi, LikeArticleApi } from "@/http/api/article";
import { ArticleListType } from "./utils/type";
import articleListLess from "./index.module.less";
import { useDispatch, useSelector } from "react-redux";
import { useState, useEffect } from "react";
import useScrollbar from "@/hooks/useScrollbar";
function ArticleList({
  Abstract = true,
  ArticleImgUrl = true,
  More = true,
  ShowUserName = true,
  PublisherId = 0,
}) {
  const menu = useSelector((state: any) => state.index.menu);
  const [ArticleList, setArticleList] = useState<any>([]);
  const [SkeletonShow, setSkeletonShow] = useState(false);
  /*  console.log(333, useScrollbar()); */
  const ScrollbarStatus = useScrollbar().scrollDirection;
  const [PageSize] = useState(10);
  const [PageNum, setPageNum] = useState(1);
  const GteArticleList = async (type: number) => {
    const params = {
      Filter: "",
      PageSize: PageSize,
      PageNum: PageNum,
      ArticleType: menu,
      PublisherId: PublisherId,
    };
    const res: any = await GteArticleListApi(params);
    console.log("列表", res, PublisherId);
    if (res.status === 0) {
      if (type) {
        const newArticle = ArticleList.concat(res.ArticleList);
        setArticleList(newArticle);
      } else {
        setArticleList(res.ArticleList);
        setSkeletonShow(false);
      }
    }
  };

  const LookArticleDetails = (ArticleId: number) => {
    window.open("/articleDetail/" + ArticleId, "_blank", "noreferrer");
  };

  const LikeOp = async (ArticleId: Number, e: any) => {
    e.stopPropagation();
    const params = {
      ArticleId: ArticleId,
    };
    const res: any = await LikeArticleApi(params);
    console.log("点赞结果", res);
    setArticleList((prev: any) =>
      prev.map((item: any) => {
        if (item.ArticleId === ArticleId) {
          return {
            ...item,
            isLike: res.isLike,
            likeCount: res.likeCount,
          };
        }
        return item;
      })
    );
  };

  useEffect(() => {
    setSkeletonShow(true);
    setPageNum(1);
    GteArticleList(0);
  }, [menu]);

  useEffect(() => {
    if (More) {
      if (ScrollbarStatus === "bottom") {
        setPageNum(() => PageNum + 1);
        GteArticleList(1);
      }
    }
  }, [ScrollbarStatus]);

  return (
    <>
      {SkeletonShow && (
        <div className={articleListLess.skeleton_content}>
          <Skeleton active />
        </div>
      )}
      {ArticleList.map((item: ArticleListType, index: number) => {
        return (
          <div
            className={articleListLess.articleItem}
            key={index}
            onClick={() => LookArticleDetails(item.ArticleId)}
          >
            <div className="font_content">
              <div className="articleTitle">{item.ArticleTitle}</div>
              {Abstract && (
                <div className="article_content">{item.Abstract}</div>
              )}
              <div className="bottom">
                <div className="article_left">
                  {ShowUserName && (
                    <>
                      <div className="article_author">{item.PublisherName}</div>
                      <div className="icon">|</div>
                    </>
                  )}
                  <div className="date">{item.PublishTime}</div>
                  <div className="icon">|</div>
                  <div className="look_num">
                    <div className="eay">
                      <EyeOutlined />
                    </div>
                    <div>{item.PageView}</div>
                  </div>
                  <div className="icon">|</div>
                  <div
                    className={["like", item.isLike ? "ActiveLike" : ""].join(
                      " "
                    )}
                    onClick={(e) => LikeOp(item.ArticleId, e)}
                  >
                    <div className="like_icon">
                      <LikeOutlined />
                    </div>
                    {item.likeCount ? (
                      <div>{item.likeCount}</div>
                    ) : (
                      <span>点赞</span>
                    )}
                  </div>
                </div>
                <div className="right_tab">
                  {item.ArticleTabs.split(",").map(
                    (ArticleTabsItem, ArticleTabsIndex) => {
                      return (
                        <div className="tab_item" key={ArticleTabsIndex}>
                          {ArticleTabsItem}
                        </div>
                      );
                    }
                  )}
                </div>
              </div>
            </div>
            {ArticleImgUrl && item.ArticleImgUrl ? (
              <div className="img">
                <img src={item.ArticleImgUrl} alt="图片" />
              </div>
            ) : (
              ""
            )}
          </div>
        );
      })}
    </>
  );
}

export default ArticleList;
